<!--
 * @Author: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @Date: 2023-11-27 09:36:09
 * @LastEditors: error: error: git config user.name & please set dead value or install git && error: git config user.email & please set dead value or install git & please set dead value or install git
 * @LastEditTime: 2023-11-30 11:12:15
 * @FilePath: /hgpt-admin/src/pages/addMeasureData/index.vue
 * @Description: 文件介绍
 * 
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved. 
-->
<template>
  <div class="reservationSearch">
    <div class="editItemBox">
      <div class="title">测评标题：</div>
      <div class="inputContent">
        <el-input placeholder="请输入"></el-input>
      </div>
    </div>
    <div class="editItemBox">
      <div class="title">列表图：</div>
      <UploadFile />
      <div class="infoText">
        支持格式：png，jpg，jpeg<br />建议尺寸：<span>300*300</span>
      </div>
      <div class="title">背景图：</div>
      <UploadFile />
      <div class="infoText">
        支持格式：png，jpg，jpeg<br />建议尺寸：<span>300*300</span>
      </div>
    </div>
    <div class="topicEditBox">
      <div class="title">介绍：</div>
      <div class="testInfoContent">
        <div class="testInfoBox">
          <div class="name">时间：</div>
          <el-input
            type="number"
            min="0"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
          <div class="unit">分钟</div>
        </div>
        <div class="testInfoBox">
          <div class="name">题目：</div>
          <el-input
            type="number"
            min="0"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
          <div class="unit">题</div>
        </div>
        <div class="testInfoBox">
          <div class="name">人数：</div>
          <el-input
            type="number"
            min="0"
            autocomplete="off"
            style="width: 100px"
          ></el-input>
          <div class="unit">万人</div>
        </div>
      </div>
      <el-input type="textarea" :rows="5" placeholder="请输入"> </el-input>
      <div class="typeTitle">题目：</div>
      <div class="testContent">
        <el-card class="test_card">
          <div class="question">
            <div class="title">题目1：</div>
            <el-input></el-input>
          </div>
          <div class="questionOption">
            <el-button
              type="primary"
              icon="el-icon-plus"
              circle
              size="mini"
            ></el-button>
            <div class="text">选项A：</div>
            <el-input></el-input>
            <div class="text">分数：</div>
            <el-input></el-input>
          </div>
          <div class="answer">
            <div class="text">结果1：</div>
            <el-input></el-input>
            <div class="text2">分数：</div>
            <el-input></el-input>
            <div class="text3">至</div>
            <el-input></el-input>
          </div>
          <el-input type="textarea" :rows="3" placeholder="请输入"> </el-input>
        </el-card>
        <div class="rightBox">
          <el-button type="primary" icon="el-icon-plus" circle></el-button>
        </div>
      </div>
      <div class="bttomBtnBox">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button>取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import UploadFile from "../../components/UploadFile.vue"
export default {
  components: { UploadFile },
  data () {
    return {
      tableData: [],
      form: {
        name: ''
      },
    }
  },
  mounted () {
  },
  methods: {
    // 保存
    save () { }
  }
}
</script>
<style lang="scss" scoped>
.reservationSearch {
  .editItemBox {
    padding: 10px 0;
    padding-left: 150px;
    display: flex;
    .title {
      width: 100px;
    }
    .inputContent {
      width: 300px;
    }
    .infoText {
      padding-left: 10px;
      padding-right: 60px;
      font-size: 10px;
      span {
        color: red;
      }
    }
  }
  .topicEditBox {
    padding: 10px 0;
    padding-left: 150px;
    width: 650px;
    .testInfoContent {
      display: flex;
      justify-content: space-between;
      .testInfoBox {
        display: flex;
        height: 80px;
        align-items: center;
        .unit {
          margin-left: 10px;
        }
      }
    }
    .typeTitle {
      padding: 10px 0;
    }
    .testContent {
      display: flex;
      .test_card {
        .question {
          display: flex;
          height: 40px;
          align-items: center;
          padding: 10px 0;
          .title {
            width: 80px;
          }
        }
        .questionOption {
          display: flex;
          height: 40px;
          align-items: center;
          padding: 10px 0;
          .text {
            width: 185px;
          }
        }
        .answer {
          display: flex;
          height: 40px;
          align-items: center;
          padding: 10px 0;
          .text {
            width: 260px;
          }
          .text2 {
            width: 200px;
          }
          .text3 {
          }
        }
      }
      .rightBox {
        width: 100px;
        display: flex;
        align-items: center;
        padding-left: 10px;
      }
    }

    .bttomBtnBox {
      margin-top: 50px;
      display: flex;
      justify-content: center;
    }
  }
}
</style>>

